<template>
  <view class="home-container">
    <view class="top">
      <image src="/static/home/topbk.png" class="top-image" mode="widthFix"></image>
      <view class="top-info position-absolute text-white-color">
        <view>
          <view class="top-title text-24 leading-34">WIFI连接</view>
          <view class="top-title text-28 flex items-center leading-40">
            <image src="/static/common/wifi.png" class="mr-16" style="width: 40rpx;height: 40rpx"></image>
            已连接
          </view>
        </view>
        <view class="mt-36">
          <view class="top-title text-24 leading-34">蓝牙连接</view>
          <view class="top-title text-28 flex items-center leading-40">
            <image src="/static/common/bluetooth-active.png" class="mr-16" style="width: 40rpx;height: 40rpx"></image>
            <text v-if="deviceStats.online" class="text-blue">
              已连接
            </text>
            <text class="text-white-color" v-else>
              未连接
            </text>

          </view>
        </view>
        <view class="mt-36">
          <view class="top-title text-24 leading-34">电池电量</view>
          <view class="top-title text-28 flex items-center leading-40">
            <image src="/static/common/wifi.png" class="mr-16" style="width: 40rpx;height: 40rpx"></image>
            已连接
          </view>
        </view>
        <view></view>
        <view></view>
      </view>
    </view>
    <!-- 设备概览 -->
    <view class="overview-card card">
      <view class="overview-item">
        <text class="overview-number">{{ deviceStats.online }}</text>
        <text class="overview-label">在线设备</text>
      </view>
      <view class="overview-item">
        <text class="overview-number">{{ deviceStats.total }}</text>
        <text class="overview-label">总设备数</text>
      </view>
      <view class="overview-item">
        <text class="overview-number">{{ deviceStats.offline }}</text>
        <text class="overview-label">离线设备</text>
      </view>
    </view>

    <!-- 最近活动 -->
    <view class="section-title">
      <text>最近活动</text>
    </view>

    <view class="activity-list">
      <view
        class="activity-item card"
        v-for="(activity, index) in recentActivities"
        :key="index"
      >
        <view class="activity-header">
          <text class="activity-device">{{ activity.deviceName }}</text>
          <text class="activity-time">{{ activity.time }}</text>
        </view>
        <view class="activity-content">
          <text class="activity-user">{{ activity.user }}</text>
          <text class="activity-action" :class="activity.actionType">{{ activity.action }}</text>
        </view>
      </view>
    </view>

    <!-- 设备列表 -->
    <view class="section-title">
      <text>我的设备</text>
      <text class="add-device" @click="addDevice">+</text>
    </view>

    <view class="device-list">
      <DeviceCard
        v-for="(device, index) in devices"
        :key="index"
        :device="device"
        @device-click="handleDeviceClick"
      />
    </view>
  </view>
</template>

<script>
import { ref } from 'vue'
import DeviceCard from '../../components/DeviceCard.vue'

export default {
  components: {
    DeviceCard
  },

  setup() {
    const deviceStats = ref({
      online: 3,
      total: 5,
      offline: 2
    })

    const recentActivities = ref([
      {
        deviceName: '大门锁',
        time: '今天 14:30',
        user: '张三',
        action: '开锁',
        actionType: 'unlock'
      },
      {
        deviceName: '车库门',
        time: '今天 12:15',
        user: '李四',
        action: '关锁',
        actionType: 'lock'
      },
      {
        deviceName: '卧室门',
        time: '昨天 20:45',
        user: '张三',
        action: '开锁',
        actionType: 'unlock'
      }
    ])

    const devices = ref([
      {
        id: 1,
        name: '大门锁',
        status: '在线',
        battery: 85,
        isLocked: true,
        lastActive: '今天 14:30'
      },
      {
        id: 2,
        name: '车库门',
        status: '在线',
        battery: 92,
        isLocked: false,
        lastActive: '今天 12:15'
      },
      {
        id: 3,
        name: '卧室门',
        status: '离线',
        battery: 45,
        isLocked: true,
        lastActive: '昨天 20:45'
      }
    ])

    const handleDeviceClick = (device) => {
      uni.navigateTo({
        url: `/pages/device/device?id=${device.id}`
      })
    }

    const addDevice = () => {
      uni.showToast({
        title: '添加设备功能待开发',
        icon: 'none'
      })
    }

    return {
      deviceStats,
      recentActivities,
      devices,
      handleDeviceClick,
      addDevice
    }
  }
}
</script>

<style scoped lang="scss">
.top{
  //background: url("/static/home/topbk.png") no-repeat 100% 100%;
  position: relative;
  width: 750rpx;
  .top-image{
    width: 100%;
  }
  .top-info{
    top: 248rpx;
    left:490rpx
  }
}



.home-container {
}

.overview-card {
  display: flex;
  justify-content: space-around;
  background: linear-gradient(to right, #1296db, #5bc0de);
  color: white;
  padding: 30rpx 0;
}

.overview-item {
  text-align: center;
}

.overview-number {
  font-size: 48rpx;
  font-weight: bold;
  display: block;
}

.overview-label {
  font-size: 24rpx;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30rpx 0 20rpx;
  font-size: 32rpx;
  font-weight: bold;
}

.add-device {
  width: 50rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  background-color: #1296db;
  color: white;
  border-radius: 50%;
  font-size: 36rpx;
}

.activity-list {
  margin-bottom: 30rpx;
}

.activity-item {
  margin-bottom: 20rpx;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.activity-device {
  font-weight: bold;
}

.activity-time {
  color: #999;
  font-size: 24rpx;
}

.activity-content {
  display: flex;
  justify-content: space-between;
}

.activity-user {
  color: #666;
}

.activity-action.unlock {
  color: #1296db;
}

.activity-action.lock {
  color: #999;
}
</style>
